<%@page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trial Impact</title>
<link href="<c:url value="/css/style.css"/>" rel="stylesheet"
	type="text/css" />
	
	
	
</head>
<body>
<script>
function scroolTextArea(){
	var textarea = document.getElementById('chat_area');
	textarea.scrollTop = textarea.scrollHeight;
}
// setTimeout(function()
// 		{
// 		    var textArea = document.getElementById('outputTextResultsArea');
// 		    textArea.scrollTop = textArea.scrollHeight;
// 		}, 10);
</script>
	<!--body part start -->
	<div id="main_body">
		<div id="left_pan">
			<img src="<c:url value="/images/trial.gif"/>" width="85" height="100"
				title="trial impact" alt="trial impact" />
			<h2>
				members <span>area</span>
			</h2>
			<%@include file="login.jsp"%>
			<h3>CHAT ROOM LIST:</h3>
			<%@include file="Rooms.jsp"%>
		</div>
		<!--left side end -->
		<!--right side start -->
		<div id="rightPan">
			<ul>
				<li><a href="#" class="main">Home</a></li>
				<li><a href="#" class="home">About Us</a></li>
				<li><a href="#" class="home">Network</a></li>
				<li><a href="#" class="sub">Submission</a></li>
				<li><a href="#" class="home">Archives</a></li>
				<li><a href="#" class="home">Finance</a></li>
				<li><a href="#" class="con">Contact</a></li>
			</ul>
			
			<c:url value="changeRoom" var="workRoomUrl">
		  		<c:param name="roomId" value="1"/>
		  	</c:url>
			<c:url value="changeRoom" var="travelRoomUrl">
		  		<c:param name="roomId" value="2"/>
		  	</c:url>
		  	<c:url value="changeRoom" var="pcRoomUrl">
		  		<c:param name="roomId" value="3"/>
		  	</c:url>
			<ul class="link">
				<li><a href="${workRoomUrl}">WORK</a></li>
				<li class="sup"><a href="${travelRoomUrl}">TRAVEL</a></li>
				<li class="sol"><a href="${pcRoomUrl}">PC</a></li>
			</ul>
			<ul class="sub_link">
				<li><a href="#">chat room</a></li>
				<li class="sup1"><a href="#">chat room</a></li>
				<li class="sol1"><a href="#">chat room</a></li>
			</ul>
			<div id="chat_box">
				<table>
					<tr>
						<td>
							<h2>${requestScope.model.getCurrentRoom().getRoomName()}</h2> 
							<%@include file="messages.jsp"%>
							
							<c:if test="${sessionScope.currentUserId != null}">							
								<form name="postMessage" method="post" action="<c:url value="postMessage"/>">
									<input type="text" id="message_field" name="Message"
										value="Input your message here..."
										onfocus="if(this.value == this.defaultValue) this.value = ''" />
									<input type="submit" name="button" class="button" value="Send" />							
								</form>								
							</c:if>
																				
						</td>
						<td>
							<h3>Online: ${requestScope.model.getUsersOnline().size()}</h3>
							<ul id="userlist">
								<c:forEach var="user"
									items="${requestScope.model.getUsersOnline()}">
									<li>${user}</li>
								</c:forEach>

							</ul>
						</td>
					</tr>
				</table>
			</div>



		</div>
		<!--right side end -->
		<br class="bank" />
	</div>
	<!--body part end -->
	<div id="footer_bg">
		<div id="footer">
			<ul>
				<li><a href="#">Home</a>|</li>
				<li><a href="#">About Us</a>|</li>
				<li><a href="#">Network </a>|</li>
				<li><a href="#">Submission </a>|</li>
				<li><a href="#">Archives</a>|</li>
				<li><a href="#"> Finance</a>|</li>
				<li><a href="#">Contact</a></li>
			</ul>
			<p>&copy; trial impact. All rights reserved.</p>
			<ul class="xhtml">
				<li><a class="xht"
					href="http://validator.w3.org/check?uri=referer" target="_blank"
					title="xhtml">xhtm</a></li>
				<li><a class="css"
					href="http://jigsaw.w3.org/css-validator/check/referer"
					target="_blank" title="css">css</a></li>
			</ul>
		</div>
	</div>
	<script>
		//call after page loaded
		window.onload=scroolTextArea ; 
	</script>
</body>
</html>